<script setup lang="ts">
import { reactive } from 'vue'
import { ref } from 'vue'

const food = reactive({
  name: 'Italian noodle',
  price: 100,
  foods: ['rice', 'cake', 'pizza'],
})
const isShow = ref(false)

const pets = ref([
  { name: 'cat', age: 3 },
  { name: 'dog', age: 4 },
  { name: 'pig', age: 5 },
]
)
</script>

<template>
  <p>{{ food.name }}</p>
  <p @click="food.price++">{{ food.price }}</p>
  <p @click="food.foods.push('pasta')">{{ food.foods }}</p>
  <button @click="isShow = !isShow">click to show Pic</button>
  <img src="https://picsum.photos/200/300" alt="" v-if="isShow">

  <ul>
    <li v-for="(item,index) in pets" :key="item.name">{{ item.name }}--{{ index+1  }}</li>
  </ul>
</template>

<style scoped>
p {
  color: red;
  font-size: larger;
}
</style>
